<script lang="ts">
  import { locale, switchLanguage, t } from '../lib/i18n';
  import { createEventDispatcher } from 'svelte';

  // 事件分发器用于触发语言切换事件
  const dispatch = createEventDispatcher();

  // 可选语言列表
  const languages = [
    { value: 'zh-CN', label: '简体中文' },
    { value: 'zh-TW', label: '繁體中文' },
    { value: 'en-US', label: 'English' }
  ];

  // 处理语言切换
  function handleLanguageChange(event: Event) {
    const select = event.target as HTMLSelectElement;
    const newLocale = select.value as 'zh-CN' | 'zh-TW' | 'en-US';
    switchLanguage(newLocale);
    dispatch('languageChanged', { locale: newLocale });
  }
</script>

<nav>
  <div class="navbar">
    <div class="logo">
      <h1>{t('app.title')}</h1>
      <p>{t('app.description')}</p>
    </div>
    <div class="language-selector">
      <select bind:value={$locale} on:change={handleLanguageChange}>
        {#each languages as lang}
          <option value={lang.value}>{lang.label}</option>
        {/each}
      </select>
    </div>
  </div>
</nav>

<style>
  nav {
    background-color: #2c3e50;
    color: white;
    padding: 0.5rem 1rem;
    width: 100%;
  }

  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  .logo h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
  }

  .logo p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
  }

  .language-selector select {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    background-color: #34495e;
    color: white;
    border: 1px solid #7f8c8d;
    cursor: pointer;
  }

  .language-selector select:focus {
    outline: none;
    border-color: #3498db;
  }

  @media (max-width: 600px) {
    .navbar {
      flex-direction: column;
      align-items: flex-start;
    }

    .language-selector {
      margin-top: 0.5rem;
      align-self: flex-end;
    }
  }
</style> 
